<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>react</title>
</head>
<body>
  <div id="root"></div>

  <script type="text/javascript" src="./components/react.development.js"></script>
  <script type="text/javascript" src="./components/react-dom.development.js"></script>
  <script type="text/javascript" src="./components/babel.min.js"></script>

  <script type="text/babel">
    function formatName (user) {
      return user.firstName + ' ' + user.lastName;
    }

    function getGreeting (user) {
      if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
      }
      return <h1>Hello, Stranger.</h1>;
    }

    const user = {
      firstName: 'sdanoi',
      lastName: 'dasdwr'
    };

    const element = (
      <h1>
        Hello, {formatName(user)}!
      </h1>
    );

    // jsx特定属性
    const element1 = <div tabIndex="0"></div>;

    const element2 = <img src={user.avatarUrl} />;

    const element3 = (
      <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
      </div>
    )

    // ReactDOM.render(
    //   element,
    //   document.getElementById('root')
    // )

    function tick () {
      const element5 = (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
      );
      
      ReactDOM.render(element5, document.getElementById('root'))
    }

    setInterval(() => {
      tick();
    }, 1000);

    // jsx 防止注入攻击
    // const title = response.potentiallyMaliciousInput;

    // 直接使用是安全的：
    // const element4 = <h1>{title}</h1>;


    // 函数组件与class组件
    // 定义组件最简单的方式就是编写Javascript函数:
    function Welcome (props) {
      return <h1>Hello, {props.name}</h1>;
    }

    class Welcome2 extends React.Component {
      render () {
        return <h1>Hello, {this.props.name}</h1>
      }
    }
  </script>
</body>
</html>